<!doctype html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">

		<link href="../../cssmui/mui.min.css" rel="stylesheet" />
		<link href="../../cssmui/mui.picker.min.css" rel="stylesheet" />
		<link rel="stylesheet" type="text/css" href="../../cssmui/icons-extra.css" />
		<script src='../../mui/mui.min.js'></script>
		<script src="../../mui/mui.picker.min.js"></script>
		<script src="../../js/app.js"></script>
		<script src='../../js/jsondb.js'></script>
		<script src='../../js/map/mydict.js'></script>		
		<script src="../../js/loadpicker.js"></script>
		<script src="../../js/map/dictservice.js"></script>
		<script src="../../js/template-web.js"></script>
	</head>

	<body>

		<header class="mui-bar mui-bar-nav">
			<a class="mui-action-back mui-icon mui-icon-back mui-pull-left"></a>
			
			<h1 class="mui-title">账单</h1>
		</header>
		<div id="pullrefresh" style="margin-bottom:50px" class="mui-content mui-scroll-wrapper">
			<div class="mui-scroll">
				<ul class="mui-table-view mui-table-view-chevron">

				</ul>
			</div>
			<!--下拉刷新容器-->

		</div>
		<nav class="mui-bar mui-bar-tab">
			<a class="mui-tab-item" href="kh">
				<span class="mui-tab-label">客户</span>
			</a>

			<a href="gys" class="mui-tab-item  ">
				<span class="mui-tab-label">供应商</span>
			</a>
		</nav>

		<script id="node_tpl" type="text/html">

			<li class="mui-table-view-cell mui-media" contact="{{cid}}" pors="{{receivable==0?'b2':'s2'}}">
				<a class="mui-navigate-right">
					<div class="mui-media-body">
						<p class='mui-ellipsis'>{{cg=='1'?'供应商':'客户'}}:{{text}}</p>
						<p class='mui-ellipsis'>
							<span style="color:#777777; ">{{receivable==0?'应付款':'应收款'}}</span>
							<span class="mui-h4" style=" margin-left:30px;color:#777777; ">￥{{receivable==0?payable:receivable}}</span>
						</p>
					</div>
				</a>
			</li>
		</script>
		<script type="text/javascript">
			//--------表单属性
			var _CGroup = '';
			var _statusname = '';

			//------------------声明 定义-------------

			var targetTab = ['acc_item.html'];
			var _queryRS = null;
			var _tb_io = new XCDBHelp('tb_io');
			var _tb_contacts = new XCDBHelp('tb_contacts');
			var _tb_tradeacct = new XCDBHelp('tb_tradeacct');
			var DICT_contact = null; //选择用的交易方
			var list_contact = null; //关联交易方

			//-----------初始化
			mui.init({
				pullRefresh: {
					container: '#pullrefresh',
					down: {
						style: 'circle',
						callback: pulldownRefresh
					},
					up: {
						auto: true,
						contentrefresh: '正在加载...',
						callback: pullupRefresh
					}
				}
			});
			/**
			 * 下拉刷新具体业务实现
			 */
			function pulldownRefresh() {
				refresh();
				mui('#pullrefresh').pullRefresh().endPulldownToRefresh();
				mui.toast("刷新成功");
			}

			var count = 0;

			function pullupRefresh() {
				var len = pullRefresh();
				if(len == 0) {
					mui('#pullrefresh').pullRefresh().endPullupToRefresh(true);
					return;
				}
				if(len == _queryRS.length) {
					mui('#pullrefresh').pullRefresh().endPullupToRefresh(true); //参数为true代表没有更多数据了。
					mui.toast("以上是全部账单")
				} else {
					mui('#pullrefresh').pullRefresh().endPullupToRefresh(false);
				}
			}

			function pullRefresh() {
				if(_queryRS == null) return 0;
				var table = document.body.querySelector('.mui-table-view');
				var i = table.children.length;
				//_idkey,_syschgdate,tagfile,srcfile
				var j = i + PAGESIZE;
				var len = (j < _queryRS.length) ? j : _queryRS.length;
				//console.log(i+','+PAGESIZE+' ,'+j+' ,' +len)
				for(; i < len; i++) {
					//	console.log(JSON.stringify(_queryRS[i]))
					k = _queryRS.length - 1 - i;
					//var li = dataToHtml(i, _queryRS[k]);
					//table.appendChild(li);
					_queryRS[k].rowid = k;
					table.innerHTML += dataToHtml(_queryRS[k]);
				}

				return len
			}
			mui.ready(function() {
				//---------------------事件-------------
				//------列表事件----------
				mui("#pullrefresh").on('tap', '.mui-table-view-cell', function() {
					var did = this.getAttribute("contact");
					var pors = this.getAttribute("pors")
					//console.log(did);
					open(targetTab[0], {
						"contact": did,
						"pors": pors
					});
				})
				window.addEventListener('bechanged', function(e) {　 //获取参数值	
					//console.log('bechanged：'+e.detail.reload);
					if(e.detail.reload == 'list') //更新明细列表
					{
						refresh();
					}
				});

				//------------按钮事件--------------	

				mui("nav").on("tap", ".mui-tab-item", function() {
					var eventname = this.getAttribute("href")
					if(eventname == "gys") {
						setPors('1');
					} else if(eventname == "kh") {
						setPors('2');
					}
					refresh();
				});
			});

			function afterPlusReady() {
				var self = _self;
				setPors(self.pors);
				refresh();
			}
			//
			function setPors(p) {
				//console.log(p);
				if(p)
					_CGroup = p;
				else
					_CGroup = '1';
				var title = '';
				switch(_CGroup) {
					case '1':
						title = '往来帐-供应商';
						break;
					case '2':
						title = '往来帐-客户';
						break;
					case '':
						title = '往来帐';
						break;
				}
				//G('span_menu3').innerHTML=_statusname;
				mui('header .mui-title')[0].innerHTML = title;
			}

			//----------载入数据--------------	
			//----------载入字典--------------

			//搜索和关联用
			function loaddict() {

				//DICT_contact=_tb_contacts.where({"cgroup":_CGroup}).getList();

				var where = {};
				where.cgroup = _CGroup.toString();
				//console.log("xxx:" + JSON.stringify(where));
				var qs = _tb_contacts.where(where).getList();
				//log(qs, 'purchase_list201')
				//console.log(JSON.stringify(qs));
				var data = _AW.select(qs, 'uname:text,_idkey:value,pysx:py,cgroup:cg')
				if(data == null) return;
				list_contact = data;

			}
			//------------加载剩余查询结果---------

			//---------------查询语句-------------		
			function queryList() {
				var wheres = {
					"monnum": CURMON,
					"or": [{
						"receivable(": 0
					}, {
						"payable(": 0
					}]
				};
				//log(wheres, 'purchaselist273')
				//console.log(JSON.stringify(wheres))
				var arr = _tb_tradeacct.where(wheres).getList();
				//console.log('arr.lengh'+arr.length)
				//console.log(JSON.stringify(arr))
				var arr1 = _AW.innerjoin(list_contact, arr, 'value=cid')
				//console.log(JSON.stringify(list_contact))
				//console.log(JSON.stringify(arr1))
				return arr1;
			}
			//-----------刷新查询结果-------------
			function refresh() {
				var table = document.body.querySelector('.mui-table-view');
				table.innerHTML = '';
				loaddict();
				_queryRS = queryList();
				pullRefresh();
			}

			//----------数据转模版-----------
			//<li clas="mui-table-view-cell  mui-media li_selected" id="{{value.pid}}">
			function dataToHtml(row) {
				//log(row, 'list292')
				if(!_IS.isMap(row)) return;
				//var elem_li = document.createElement('li'); // 生成一个 li元素
				//elem_li.setAttribute("class", "mui-table-view-divider mui-media ");
				//elem_li['did'] = row._idkey;

				//elem_li.innerHTML = template('node_tpl', row);
				//return elem_li;
				//console.log(JSON.stringify(row));
				return template('node_tpl', row);
			}

			//---------页面准备-----------
		</script>
	</body>

</html>